{% extends "base1.html" %}

{% block content %}
<!-- Toast container -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer"></div>

<div class="container mt-4">
    <h3 class="mb-4">系统设置</h3>
    <div class="card">
        <div class="card-body">
            <form id="settingsForm">
                <div class="row">
                    <!-- 只保留右侧板块 -->
                    <div class="col-md-12">
                        <!-- 机器人配置 -->
                        <div class="mb-4">
                            <h5 class="border-bottom pb-2"><i class="fas fa-robot me-2"></i>机器人配置</h5>
                            <div class="mb-3">
                                <label class="form-label">机器人IP</label>
                                <input type="text" class="form-control" name="ROBOT_IP" value="{{ env.ROBOT_IP }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">机器人端口</label>
                                <input type="number" class="form-control" name="ROBOT_PORT" value="{{ env.ROBOT_PORT }}" required>
                            </div>
                        </div>

                        <br>
                        <!-- 拍照模式（只保留OpenCV） -->
                        <div class="mb-4">
                            <h5 class="border-bottom pb-2"><i class="fas fa-camera me-2"></i>拍照模式</h5>
                            <div class="mt-2 d-flex gap-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="PHOTO_MODE" value="1" id="photoMode1" checked>
                                    <label class="form-check-label" for="photoMode1">
                                        OpenCV
                                    </label>
                                </div>
                                <div class="form-check d-none">
                                    <input class="form-check-input" type="radio" name="PHOTO_MODE" value="0" id="photoMode0" disabled>
                                    <label class="form-check-label text-muted" for="photoMode0">
                                        OBS (禁用)
                                    </label>
                                </div>
                                <div class="form-check d-none">
                                    <input class="form-check-input" type="radio" name="PHOTO_MODE" value="2" id="photoMode2" disabled>
                                    <label class="form-check-label text-muted" for="photoMode2">
                                        FFmpeg (禁用)
                                    </label>
                                </div>
                            </div>
                            <small class="form-text text-muted mt-2">
                                当前仅支持 OpenCV 拍照模式，摄像头参数设置已隐藏。
                            </small>
                        </div>

                        <!-- 摄像头URL列表 -->
                        <div class="mb-4">
                            <h5 class="border-bottom pb-2"><i class="fas fa-video me-2"></i>摄像头URL列表</h5>
                            <small class="form-text text-muted mt-2">
                             如：rtsp://admin@192.168.10.21:554/user=admin&password=&channel=1&stream=0.sdp?
                            </small>
                            
                            <textarea class="form-control" name="CAMERA_URLS" rows="6" placeholder="每行一个摄像头RTSP地址 如：">{{ env.CAMERA_URLS or '' }}</textarea>
                            <small class="form-text text-muted">如需添加更多摄像头，请每行填写一个RTSP地址。</small>
                        </div>

                        <input type="hidden" name="CAMERA_WIDTH" value="2880">
                        <input type="hidden" name="CAMERA_HEIGHT" value="1620">
                        <input type="hidden" name="CAMERA_FPS" value="25">
                        <input type="hidden" name="CAMERA_JPEG_QUALITY" value="80">
                        <input type="hidden" name="CAMERA_BUFFER_SIZE" value="10">
                        <input type="hidden" name="CAMERA_BRIGHTNESS" value="16">
                        <input type="hidden" name="CAMERA_CONTRAST" value="40">
                        <input type="hidden" name="CAMERA_SATURATION" value="80">
                        <input type="hidden" name="CAMERA_SHARPNESS" value="6">
                        <input type="hidden" name="CAMERA_GAMMA" value="120">
                        <input type="hidden" name="CAMERA_AUTO_EXPOSURE" value="1">
                        <input type="hidden" name="CAMERA_EXPOSURE_TIME" value="80">
                        <input type="hidden" name="CAMERA_GAIN" value="20">
                        <input type="hidden" name="CAMERA_WB_AUTO" value="0">
                        <input type="hidden" name="CAMERA_WB_TEMP" value="5000">
                        <input type="hidden" name="CAMERA_FOCUS_AUTO" value="0">
                        <input type="hidden" name="CAMERA_FOCUS" value="200">
                        <input type="hidden" name="CAMERA_BACKLIGHT" value="0">
                        <input type="hidden" name="CAMERA_POWERLINE_FREQ" value="1">

                        <br>
                        <!-- FTP配置 -->
                        <div class="mb-4">
                            <h5 class="border-bottom pb-2"><i class="fas fa-server me-2"></i>FTP配置</h5>
                            <div class="mb-3">
                                <label class="form-label">FTP服务器</label>
                                <input type="text" class="form-control" name="FTP_HOST" value="{{ env.FTP_HOST }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">FTP端口</label>
                                <input type="number" class="form-control" name="FTP_PORT" value="{{ env.FTP_PORT }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">FTP用户名</label>
                                <input type="text" class="form-control" name="FTP_USER" value="{{ env.FTP_USER }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">FTP密码</label>
                                <input type="password" class="form-control" name="FTP_PASS" value="{{ env.FTP_PASS }}" required>
                            </div>
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="FTP_MOCK_MODE" {% if env.FTP_MOCK_MODE in ['1', 'true', 'True', 1, True] %}checked{% endif %}>
                                    <label class="form-check-label">FTP模拟模式</label>
                                </div>
                            </div>
                        </div>

                        <br>
                        <!-- 升降柱配置 -->
                        <div class="mb-4">
                            <h5 class="border-bottom pb-2"><i class="fas fa-arrow-up me-2"></i>升降柱配置</h5>
                            <div class="mb-3">
                                <label class="form-label">串口号</label>
                                <input type="text" class="form-control" name="LIFT_PORT" value="{{ env.LIFT_PORT }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">升降柱高度</label>
                                <select class="form-select" name="LIFT_HEIGHT">
                                    <option value="L2" {% if env.LIFT_HEIGHT == 'L2' %}selected{% endif %}>半程高度（二号位）</option>
                                    <option value="L3" {% if env.LIFT_HEIGHT == 'L3' %}selected{% endif %}>全程高度（三号位）</option>
                                </select>
                            </div>
                        </div>

                        <!-- OBS相关字段（始终隐藏） -->
                        <input type="hidden" name="OBS_WS_URL" value="ws://127.0.0.1:4455">
                        <input type="hidden" name="OBS_PASSWORD" value="">
                        <input type="hidden" name="OBS_FOCUS_TIME" value="1">


                    </div>
                </div>
                <div class="mt-4 d-flex justify-content-end">
                    <button type="submit" class="btn btn-lg btn-primary">
                        <i class="fas fa-save me-2"></i>保存设置
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Camera Dashboard Link -->
    <div class="card mt-4">
        <div class="card-body">
            <h5 class="card-title">摄像头管理</h5>
            <div class="d-flex gap-2">
                <a href="{{ url_for('main.ipcams') }}" class="btn btn-outline-primary">
                    <i class="fas fa-video me-1"></i>摄像头测试
                </a>
            </div>
        </div>
    </div>

    <!-- Crontab Manager Link -->
    <div class="card mt-4">
        <div class="card-body">
            <h5 class="card-title">计划任务管理</h5>
            <div class="d-flex gap-2">
                <a href="{{ url_for('main.crontab') }}" class="btn btn-outline-primary">
                    <i class="fas fa-calendar-alt me-1"></i>计划任务管理
                </a>
            </div>
        </div>
    </div>
</div>
      <br><br><br><br>
{% endblock %}

{% block scripts %}
<script>
// 只保留表单提交相关JS

document.getElementById('settingsForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const settings = {};
    // 处理所有复选框字段
    const checkboxFields = [
        'FTP_MOCK_MODE'
    ];
    for (let field of checkboxFields) {
        settings[field] = formData.has(field) ? '1' : '0';
    }
    for (let [key, value] of formData.entries()) {
        if (!checkboxFields.includes(key)) {
            settings[key] = value;
        }
    }
    // 保存按钮处理
    const saveBtn = document.querySelector('button[type="submit"]');
    const originalText = saveBtn.innerHTML;
    saveBtn.disabled = true;
    saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>保存中...';
    try {
        const response = await fetch('/api/settings', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(settings)
        });
        const result = await response.json();
        if (response.ok) {
            // 创建并显示成功消息 toast
            const container = document.getElementById('toastContainer');
            container.innerHTML = `
                <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header bg-success text-white">
                        <i class="fas fa-check-circle me-2"></i>
                        <strong class="me-auto">成功</strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
                    </div>
                    <div class="toast-body">
                        设置已保存，部分设置可能需要重启服务才能生效
                    </div>
                </div>
            `;
            const toastElement = container.querySelector('.toast');
            const toast = new bootstrap.Toast(toastElement);
            toast.show();
        } else {
            throw new Error(result.message || '保存失败');
        }
    } catch (error) {
        // 显示错误消息 toast
        const container = document.getElementById('toastContainer');
        container.innerHTML = `
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header bg-danger text-white">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong class="me-auto">错误</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    保存设置时出错: ${error.message}
                </div>
            </div>
        `;
        const toastElement = container.querySelector('.toast');
        const toast = new bootstrap.Toast(toastElement);
        toast.show();
    } finally {
        saveBtn.disabled = false;
        saveBtn.innerHTML = originalText;
    }
});
</script>
{% endblock %}
